<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景模糊和点击等效果</title>

  <link rel="stylesheet" href="./css/L2.css">
</head>

<body>
  <!-- 背景模糊 -->
  <div class="backdorp">
    背景模糊效果
  </div>

  <hr>
  <!-- 点击效果 -->
  <input class="i1" type="text">

  <hr>

  <label>
    <span>点击标题也可以</span>
    <input class="i1" type="text"></input>
  </label>

  <hr>
  <label for="l0001">标签和输入元素分离也可以</label>
  <div>我是负责分离的div</div>
  <div>我是负责分离的div</div>
  <div>我是负责分离的div</div>
  <input type="text" class="i1" id="l0001">

  <hr>
  <label for="rdo1">男生</label>
  <input type="radio" name="sex" id="rdo1">
  <div>
    哈哈哈哈
  </div>

  <label for="rdo2">女生</label>
  <input type="radio" name="sex" id="rdo2">
  <div>
    嘻嘻嘻嘻
  </div>

  <label for="rdo3">保密</label>
  <input type="radio" name="sex" id="rdo3">
  <div>
    黑暗骑士
  </div>


</body>

</html>